<template>
    <el-form :model="form" label-width="auto">
        <el-form-item label="房间号">
            <el-input v-model="form.room_no" />
        </el-form-item>
        <el-form-item label="床号">
            <el-input v-model="form.bed_no" />
        </el-form-item>
        <el-form-item label="床状态">
            <el-input v-model="form.bed_status" />
        </el-form-item>
        <el-form-item label="备注">
            <el-input v-model="form.remarks" />
        </el-form-item>
        <el-form-item label="创建人">
            <el-input v-model="form.create_by" />
        </el-form-item>
        <el-form-item label="创建时间">
            <el-form-item>
                <el-date-picker v-model="form.create_time" type="date" aria-label="Pick a date"
                          placeholder="请选择日期" style="width: 100%" format="YYYY-MM-DD"
                          value-format="YYYY-MM-DD"/>
            </el-form-item>
        </el-form-item>
        <el-form-item label="更新人">
            <el-input v-model="form.update_by" />
        </el-form-item>
        <el-form-item label="更新时间">
            <el-form-item>
                <el-date-picker v-model="form.update_time" type="date" aria-label="Pick a date"
                          placeholder="请选择日期" style="width: 100%"  format="YYYY-MM-DD"
                          value-format="YYYY-MM-DD"/>
            </el-form-item>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button @click="cancel">取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup name='BedEdit'>
import { ref, onMounted } from "vue";
import { ElMessageBox, ElNotification } from 'element-plus'
// 导入对应的 API 函数
import { saveOrUpdate, getById } from '@/api/bed/index'
import { defineProps } from 'vue';

const { closeDialog, editId } = defineProps(['closeDialog', 'editId'])

// 表单数据
const form = ref({
    room_no: '',
    bed_no: '',
    bed_status: '',
    remarks: '',
    create_by: '',
    create_time: '',
    update_by: '',
    update_time: ''
})

// 保存按钮点击事件
const onSubmit = () => {
    saveOrUpdate(form.value).then(success => {
        ElNotification({
            title: '消息',
            type: 'success',
            message: "保存成功",
        })

        // 调用父组件中的函数用于关闭 dialog 和更新查询结果
        closeDialog(true)
    }).catch(error => {
        ElNotification({
            title: '消息',
            type: 'error',
            message: "保存失败，请检查输入数据",
        })
    })
}

const cancel = () => {
    // 调用父组件中的函数用于关闭 dialog 和更新查询结果
    closeDialog(false)
}

// 当修改操作的时候根据主键查询
function pageGetById() {
    getById(editId).then(bed => {
        form.value = bed
    }).catch(error => {
        ElNotification({
            title: '消息',
            type: 'error',
            message: "获取床信息失败，请稍后重试",
        })
    })
}

onMounted(() => {
    // 如果是修改
    if (editId) {
        pageGetById()
    }
})
</script>

<style scoped></style>